import React from 'react';
import {Card, Descriptions, Drawer, Spin, Tabs} from 'antd';
import styles from '@/utils/utils.less'
import {SysLoginLogModel} from '../data';
import {DetailsDialogProps} from "@/global";
import useLoad from "@/hooks/useLoad";
import service from '../service';



const {TabPane} = Tabs;

/** 系统登录日志详情组件属性 */
const Details: React.FC<DetailsDialogProps> = props => {
  const {params: {id}, visible, hide} = props;
  const {loading, data: model} = useLoad<SysLoginLogModel>({
    isLoad: Boolean(id),
    onLoad: () => service.selectById(id),
  }, [id]);

  return (
    <Drawer
      title="查看系统登录日志详细信息"
      width="50%"
      visible={visible}
      onClose={hide}
      destroyOnClose
      className={styles.drawerBodyPadding}
    >
      <Spin spinning={loading} wrapperClassName={styles.h100p}>
        <Tabs className={styles.drawerBodyTabsPadding}>
          <TabPane tab="基本信息" key="basic">
            {model && (<Basic model={model}/>)}
          </TabPane>
        </Tabs>
      </Spin>
    </Drawer>
  );
};

function Basic(props: { model: SysLoginLogModel }) {
  const {model} = props;
  return (
    <Card bordered={false} className={styles.cardBodyDesc}>
      <Descriptions column={1} bordered={true} size="small" className={styles.detailsDescriptions}>
        <Descriptions.Item label="登录时间">{model.operateDateTime}</Descriptions.Item>
        <Descriptions.Item label="类型">{model.category == 1 ? '登录' : '注销'}</Descriptions.Item>
        <Descriptions.Item label="登录账号">{model.account}</Descriptions.Item>
        <Descriptions.Item label="状态">{model.status === true ? '成功' : '失败'}</Descriptions.Item>
        <Descriptions.Item label="操作信息">{model.msg}</Descriptions.Item>
        <Descriptions.Item label="IP地址">{model.ip}</Descriptions.Item>
        <Descriptions.Item label="IP地点">{model.ipLocation}</Descriptions.Item>
        <Descriptions.Item label="浏览器">{model.browser}</Descriptions.Item>
        <Descriptions.Item label="操作系统">{model.os}</Descriptions.Item>
        <Descriptions.Item label="应用主键">{model.appId}</Descriptions.Item>
        <Descriptions.Item label="应用名称">{model.appName}</Descriptions.Item>
      </Descriptions>
    </Card>
  );
}

export default React.memo(Details);





